<template>

  <div>


    <el-container style="height: auto; border: 1px solid #eee">
      <el-container>
        <el-header style="text-align: center; font-size: 12px;height:90px">

          <el-row class="input1">
            <div class="boxinput"><div class="fontBox" style="border-right-width: 30px;padding-right: 18px;">State:</div><el-input  v-model="state" placeholder="请输入state" style="margin-right:10px;"></el-input><el-button @click="search1" type="primary" round>搜索</el-button></div>
          </el-row>
          <el-row class="input2">
            <div class="boxinput"><div class="fontBox">Country:</div><el-input  v-model="country" placeholder="请输入country"  style="margin-right:10px;"></el-input><el-button type="primary" round @click="search2">搜索</el-button></div>
          </el-row>

        </el-header>

        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="state" label="state" width="140">
            </el-table-column>
            <el-table-column prop="country" label="country" width="120">
            </el-table-column>
            <el-table-column prop="latestTotalCases" label="latestTotalCases">
            </el-table-column>
            <el-table-column prop="diffFromPrevDay" label="diffFromPrevDay">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
import {getData} from "../API/index.js";

export default {



  name: "index",

  data() {
    return {
      tableData: [],
      state:"",
      country:""
    }
  },
  methods:
      {
        search1()
        {
          getData("getData/virusData",{state:this.state}).then(value =>
          {

              const data=value.data;
              console.log(data);
              if (data!=null)
              {
                  this.tableData=data;
              }else
              {
                alert("服务器出错，获取数据失败");
              }


          }).catch(error=>
          {
            alert("请求失败！");
              console.log(error);
          })
        },
        search2()
        {

          console.log(this.country);
          getData("getData/virusData",{country:this.country}).then(value =>
          {

            const data=value.data;
            console.log(data);
            if (data!=null)
            {
              this.tableData=data;
            }else
            {
              alert("服务器出错，获取数据失败");
            }


          }).catch(error=>
          {
            alert("请求失败！");
            console.log(error);
          })
        }
      },

  beforeMount() {

    this.search1();
  }
}
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
}
.input2{
  top:8px;
}
.boxinput{
  height: 40px;
  width: 300px;
  display: flex;
  align-items: center;
}
.fontBox
{
  font-family: "Helvetica Neue"
}
</style>